<template>
  <div class="header_M">
    <div class="left">
      <router-link to="/" class="mainPage">LOGO</router-link>
    </div>
    <div class="center">
      <router-link to="/recommend" class="recommend"
        ><span @mouseenter="showLeft1()" @mouseleave="hideLeft1()"
          >为你推荐</span
        ></router-link
      >
      <router-link to="/cinema" class="cinema"
        ><span @mouseenter="showCenter2()" @mouseleave="hideCenter2()"
          >美视观影</span
        ></router-link
      >
      <router-link to="/magazine" class="magazine"
        ><span @mouseenter="showLeft2()" @mouseleave="hideLeft2()"
          >杂志浏览</span
        ></router-link
      >
      <router-link to="/fiction" class="fiction"
        ><span @mouseenter="showRight2()" @mouseleave="hideRight2()"
          >小说阅读</span
        ></router-link
      >
      <el-dropdown class="dropdown1">
        <span
          class="el-dropdown-link"
          style="font-size: 16px; margin-left: 15px"
        >
          更多<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>诗歌美文</el-dropdown-item>
          <el-dropdown-item>音乐MV</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="right">
      <el-dropdown @command="handleCommand" class="dropdown2">
        <span class="el-dropdown-link" @click="f_person()">
          <span class="iconfont icon-character-avatar"></span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click="f_test()" command="a"
            >个人信息</el-dropdown-item
          >
          <el-dropdown-item command="b" @click="loginOut"
            >log out</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <router-link to="Login" class="Login">Login</router-link>
      <router-link to="Register" class="Register">Sign in</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "headerTop",
  data() {
    return {
      b_show: false,
      iscenter_h: false,
      isleft_h: false,
      isleft2_h: false,
      isright_h: false,
    };
  },
  methods: {
    f_person() {
      this.$router.push("/test");
    },
    showMsg() {
      console.log("hover");
      this.b_show = true;
    },
    moveMsg() {
      this.b_show = false;
    },
    f_test() {
      console.log("ttw");
    },
    handleCommand(command) {
      if (command == "a") this.$router.push("/test");
      else if (command == "b") this.$store.commit("logout");
    },
    loginOut() {
      this.$store.commit("logout");
    },
    showCenter2() {
      this.iscenter_h = true;
      console.log(this.iscenter_h + "!!");
      this.$emit("say", [3,this.iscenter_h]);
    },
    hideCenter2() {
      this.iscenter_h = false;
      console.log(this.iscenter_h + "!!");
      this.$emit("say", [3,this.iscenter_h]);
    },

    showLeft2() {
      this.isleft2_h = true;
      console.log(this.iscenter_h + "!!");
      this.$emit("say", [2,this.isleft2_h]);
    },
    hideLeft2() {
      this.isleft2_h = false;
      console.log(this.iscenter_h + "!!");
      this.$emit("say", [2,this.isleft2_h]);
    },

    showRight2() {
      this.isright_h = true;
      console.log(this.iscenter_h + "!!");
      this.$emit("say", [4,this.isright_h]);
    },
    hideRight2() {
      this.isright_h = false;
      console.log(this.iscenter_h + "!!");
      this.$emit("say", [4,this.isright_h]);
    },

    showLeft1() {
      this.isleft_h = true;
      console.log(this.iscenter_h + "!!");
      this.$emit("say", [1,this.isleft_h]);
    },
    hideLeft1() {
      this.isleft_h = false;
      console.log(this.iscenter_h + "!!");
      this.$emit("say", [1,this.isleft_h]);
    },
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.mainPage {
  display: block;
  font-size: 25px;
  color: #fff;
}
.Login {
  font-size: 20px;
  color: rgb(40, 143, 228);
  margin-right: 10px;
}
.Register {
  font-size: 20px;
  color: orange;
}
.recommend {
  margin-right: 10px;
}
.dropdown2 {
  margin-right: 10px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.header_M {
  width: 100%;
  height: 10vh;
  background-color: black;
  display: flex;
  align-items: center;
}
.left {
  width: 250px;
  flex: 0 0 250px;
}
.center {
  flex: 1 1 auto;
  font-size: 16px;
  align-items: center;
}
.recommend:hover {
  color: rgb(166, 37, 226);
}
.cinema,
.fiction,
.magazine {
  margin-left: 15px;
  color: #fff;
}
.recommend {
  color: rgb(47, 198, 209);
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-link:hover,
.cinema:hover,
.fiction:hover,
.magazine:hover {
  color: rgb(241, 226, 13);
}
.right {
  width: 400px;
  flex: 0 0 400px;
  text-align: right;
  margin-right: 20px;
}
.el-dropdown-menu__item:hover {
  color: rgb(47, 198, 209);
}
</style>